<script setup>
    import {ref as 响应} from 'vue'
    import { useCssVar as 使用样式变量 } from '@vueuse/core';

    const 圆角组 = 响应([
        {
            名称: '没有圆角',
            类型: '',
        },
        {
            名称: '小圆角',
            类型: 'small',
        },
        {
            名称: '基本圆角',
            类型: 'base',
        },
        {
            名称: '大圆角',
            类型: 'round',
        },
    ])
</script>

<template>
    <el-row :gutter="12" class="测试圆角">
        <el-col v-for="(圆角, 索引) in 圆角组" :key="索引" :span="6" :xs="{span: 12}">
            <div class="标题">{{ 圆角.名称 }}</div>
            <div class="数值">
                <code>
                    边框圆角:
                    {{ 
                        圆角.类型
                        ? 使用样式变量(`--el-border-radius-${圆角.类型}`)
                        : '0px'
                    }}
                </code>
            </div>
            <div class="圆角"
                :style="{
                    borderRadius: 圆角.类型 
                    ? `var(--el-border-radius-${圆角.类型})`
                    : '0px'
                }"
            ></div>
        </el-col>
    </el-row>
</template>


<style scoped>
    .测试圆角 .标题 {
        color: var(--el-text-color-regular);
        font-size: 18px;
        margin: 10px 0;
    }
    .测试圆角 .数值 {
        color: var(--el-text-color-primary);
        font-size: 16px;
        margin: 10px, 0;
    }
    .测试圆角 .圆角 {
        height: 40px;
        width: 70%;
        border: 1px solid var(--el-border-color);
        border-radius: 0;
        margin-top: 20px;
    }


</style>